<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<contentTopBar></contentTopBar>
		
		<!-- 顶部轮播图 -->
		<view class="swiper-section">
			<swiper class="swiper" circular autoplay interval="3000" duration="500" @change="swiperChange">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="item.image" mode="aspectFill" class="swiper-image" />
					<view class="swiper-text">
						<text class="swiper-title">{{item.title}}</text>
						<text class="swiper-subtitle">{{item.subtitle}}</text>
					</view>
				</swiper-item>
			</swiper>
			<!-- 轮播图指示点 -->
			<view class="dots">
				<view 
					class="dot" 
					v-for="(item,index) in swiperList" 
					:key="index" 
					:class="{'active': currentSwiper === index}">
				</view>
			</view>
		</view>
		<!-- 分类图标 -->
		<view class="category-section">
			<view class="category-item" v-for="(item, index) in categories" :key="index">
				<image :src="item.icon" mode="aspectFit" class="category-icon" />
				<text class="category-name">{{item.name}}</text>
			</view>
		</view>
		<!-- 时尚女装板块 -->
		<Section title="时尚女装" :list="fashionBanners"></Section>
		<!-- 户外运动板块 -->
		<Section title="户外运动" :list="sportBanners"></Section>
		<!-- 数码板块 -->
		<Section title="数码" :list="elecBanners"></Section>
		<!-- 母婴板块 -->
		<Section title="母婴" :list="motherBanners"></Section>
	</view>
</template>

<script>
	import contentTopBar from '../../components/content-top-bar/content-top-bar.vue';
	import Section from '../../components/section/section.vue';
	import Category from '../../components/category/category.vue';
	export default {
		components: {
			contentTopBar,
			Section,
			Category
		},
		data() {
			return {
				categories: [
					{ name: '服装', icon: '/static/images/服装.png' },
					{ name: '数码', icon: '/static/images/数码.png' },
					{ name: '生活', icon: '/static/images/生活.png' },
					{ name: '母婴', icon: '/static/images/母婴.png' },
					{ name: '活动', icon: '/static/images/活动.png' },
					{ name: '户外', icon: '/static/images/运动.png' },
					{ name: '美妆', icon: '/static/images/美妆.png' },
					{ name: '超市', icon: '/static/images/超市.png' }
				],
				swiperList: [
					{
						image: '/static/images/nvzhuang_3023.jpg',
						title: '时尚女装专场',
						subtitle: '新品上市 限时特惠'
					},
					{
						image: '/static/images/shuma_9129.jpg',
						title: '数码产品专区',
						subtitle: '品质保证 超值优惠'
					},
					{
						image: '/static/images/muying_6016.jpg',
						title: '母婴用品专场',
						subtitle: '精选好货 温暖呵护'
					}
				],
				currentSwiper: 0,
				fashionBanners: [
					{ image: '/static/images/nvzhuang_1135.jpg' },
					{ image: '/static/images/nvzhuang_8139.jpg' },
					{ image: '/static/images/nvzhuang_8209.jpg' },
					{ image: '/static/images/nvzhuang_3023.jpg' }
				],
				sportBanners: [
					{ image: '/static/images/huwai_9076.jpg' },
					{ image: '/static/images/huwai_6068.jpg' },
					{ image: '/static/images/huwai_6181.jpg' },
					{ image: '/static/images/huwai_8072.jpg' }
				],
				elecBanners: [
					{ image: '/static/images/shuma_1749.jpg' },
					{ image: '/static/images/shuma_7965.jpg' },
					{ image: '/static/images/shuma_4725.jpg' },
					{ image: '/static/images/shuma_8298.jpg' }
				],
				motherBanners: [
					{ image: '/static/images/muying_9882.jpg' },
					{ image: '/static/images/muying_6016.jpg' },
					{ image: '/static/images/muying_3130.jpg' },
					{ image: '/static/images/muying_7363.jpg' }
				]
			}
		},
		methods: {
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
		},
		onShow() {
			// 恢复默认颜色
			uni.setTabBarStyle({
				backgroundColor: '#ffffff',
				borderStyle: 'white',
				color: '#8a8a8a',
				selectedColor: '#eb4446'
			})
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	/* 轮播图样式 */
	.swiper-section {
		position: relative;
		height: 360rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.swiper-text {
		position: absolute;
		left: 40rpx;
		bottom: 40rpx;
		color: #ffffff;
		text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	}

	.swiper-title {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.swiper-subtitle {
		display: block;
		font-size: 24rpx;
		opacity: 0.9;
	}

	/* 轮播图指示点 */
	.dots {
		position: absolute;
		right: 40rpx;
		bottom: 20rpx;
		display: flex;
		gap: 12rpx;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		background: rgba(255,255,255,0.6);
		border-radius: 50%;
		transition: all 0.3s;
	}

	.dot.active {
		width: 24rpx;
		border-radius: 6rpx;
		background: #ffffff;
	}

	/* 分类图标样式 */
	.category-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 30rpx 20rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
	}

	.category-item {
		width: 25%; /* 每行4个，所以是25% */
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.category-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.category-name {
		font-size: 24rpx;
		color: #333;
	}

	/* 板块样式 */
	.section {
		background-color: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 16rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.scroll-banner {
		white-space: nowrap;
	}

	.banner-item {
		display: inline-block;
		width: 300rpx;
		margin-right: 20rpx;
	}

	.section-banner {
		width: 100%;
		height: 200rpx;
		border-radius: 10rpx;
		border: 0.5px solid #c9c9c9;
	}

	/* 底部导航栏样式 */
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #eee;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab-icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 6rpx;
	}

	.tab-text {
		font-size: 24rpx;
		color: #666;
	}
</style>
